<template>
  <view>
    <view class="h-80 flex align-center justify-around p-lr-40 bg-fff oh">
      <view class="flex1 flex justify-center" v-if="showHospitalResearch">
        <DropDownSelect placeholder="选择医院" :list="hospitalOption" valueKey="hospitalId" @confirm="confirm" />
      </view>
      <view class="flex align-center justify-end flex1">
        <DateTimePicker @unitChange="unitChange" @dateChange="dateChange"  />
      </view>
    </view>

    <view class="m-lr-20 pb-50 oys">
      <view class="mt-20 p-tb-20 p-lr-30 box-shadow w-full oh bg-fff br-10" v-for="(item, index) in resultList"
        :key="index" @tap.stop="toOrderDetail(item.staffId, item.hospitalId, item.hospitalName, item.staffName ,item.companyId)">
        <view class="flex align-center justify-between">
          <text class="fz-40 font-bold">{{ item.staffName }}</text>
          <image class="w-14 h-28 ml-20 min-w-14" src="@/static/images/common/toPath.png"></image>
        </view>
        <view class="color-CCCCCC fz-24 mt-6">驻点医院：{{ item.hospitalName }}</view>
        <view class="flex align-center mt-18 text-left">
          <view style="min-width:43%">
            <view>巡检：{{ item.inspection.deviceFinishTotal }}</view>
            <view class="mt-18">维修：{{ item.repair.deviceFinishTotal }}</view>
          </view>
          <view >
            <view>保养：{{ item.maintenance.deviceFinishTotal }}</view>
            <view class="mt-18">各设备占比：{{ orderProportion(item.inspection.deviceFinishTotal,item.maintenance.deviceFinishTotal,item.repair.deviceFinishTotal) }}</view>
          </view>
        </view>
      </view>

    </view>
    <EmptyIcon v-if="!loading && resultList.length === 0" />
  </view>
</template>

<script>
import DropDownSelect from "../dropDownSelect"
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import DateTimePicker from "../dateTimePicker";
import { getDeviceList } from "@/api/statistics/staff"
import { optionAllHospital } from "@/api/hospital/hospital"

export default {
  name: "deviceDimension",
  components: { EmptyIcon, DropDownSelect, DateTimePicker },
  created () {
    const curHospitalId = this.$store.getters.curHospitalId !== -1 ? this.$store.getters.curHospitalId : ""
    this.queryParams.companyId = this.$store.getters.companyId !== -1 ? this.$store.getters.companyId : ""
    if (this.$auth.hasRoleOr(['co-admin','admin'])) {
      this.getOptionHospital()
    } else if (this.$auth.hasRole('engineer')) {
      this.queryParams.hospitalId = curHospitalId
      this.queryParams.staffId = this.$store.getters.staffId !== -1 ? this.$store.getters.staffId : ""
    } else if (this.$auth.hasRole('manager')) {
      this.queryParams.hospitalId = curHospitalId
    }
    this.queryParams.year = new Date().getFullYear()
    this.init()
  },
  data () {
    return {
      hospitalOption: [],
      queryParams: {
        year: '',
        month: '',
        day: '',
        week: '',
        unitType: 0,
        pageNum: 1,
        pageSize: 10,
      },
      hasNext: false,
      resultList: [],
      loading: true,
    }
  },
  computed: {
    showHospitalResearch () { return !this.$auth.hasRoleOr(['manager', 'engineer']) },
  },
  methods: {
    init () {
      this.loading = true
      getDeviceList(this.queryParams).then(res => {
        this.hasNext = res.hasNext
        this.resultList = res.rows || []
      }).finally(() => this.loading = false)
    },
    reachBottom(){
      if (!this.loading && this.hasNext) {
        this.getNextList()
      }
    },
    getNextList(){
      this.loading = true
      const params = {
        ...this.queryParams,
        pageNum : this.queryParams.pageNum +1,
      }
      getDeviceList(params).then(res => {
        this.queryParams.pageNum++
        this.hasNext = res.hasNext
        this.resultList = [...this.resultList, ...res.rows]
      }).finally(()=>this.loading = false)
    },
    getOptionHospital () {
      optionAllHospital(this.queryParams.companyId).then(res => {
        this.hospitalOption = res.data
      })
    },
    //日期单位变更
    unitChange (unit) {
      this.queryParams.unitType = unit
      // this.init()
    },
    //日期变更
    dateChange (dateObj) {
      this.queryParams.year = dateObj.year
      this.queryParams.month = dateObj.month
      this.queryParams.day = dateObj.day
      this.queryParams.week = dateObj.week
      this.init()
    },
    confirm (hospitalId) {
      if (this.showHospitalResearch) {
        this.queryParams.hospitalId = hospitalId
        this.init()
      }
    },
    orderProportion(inspection=0,maintenance=0,repair=0){
      const total = inspection+maintenance+repair
      if(total===0){
        return '0%:0%:0%'
      }
      const inspRatio = ((inspection/total)*100).toFixed(0)
      const maintenanceRatio = ((maintenance/total)*100).toFixed(0)
      const repairRatio = ((repair/total)*100).toFixed(0)
      return `${inspRatio}%:${maintenanceRatio}%:${repairRatio}%`
    },
    toOrderDetail (staffId, hospitalId, hospitalName, staffName ,companyId) {
      const queryParams = {
        staffId,
        hospitalId,
        hospitalName,
        staffName,
        companyId,
        year: this.queryParams.year,
        month: this.queryParams.month,
        week: this.queryParams.week,
        day: this.queryParams.day,
        unitType: this.queryParams.unitType
      }
      this.$tab.navigateTo(`/pages/statistics/staff-device-order-detail?queryParams=${encodeURIComponent(JSON.stringify(queryParams))}`)
    }
  },
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped></style>
